<template>
<el-card>
  <el-form inline>
    <el-form-item>
      <el-input placeholder="角色名称" v-model="searchName"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" icon="el-icon-search" size="small" @click="searchRoles">查询</el-button>
      <el-button size="small" @click="removeUser">清空</el-button>
    </el-form-item>
  </el-form>
  <el-form>
    <el-form-item>
      <el-button type="primary" @click="showDialog">添加</el-button>
      <el-button 
      type="danger"
      :disabled="!ids.length"
      @click="deleteAllChecked"
      >批量删除</el-button>
    </el-form-item>
    <el-form-item>
      <el-table border :data="tmList" @selection-change="selectionChecked" style="width: 60%">
        <el-table-column type="selection" width="100"></el-table-column>
        <el-table-column label="序号" type="index" width="160" align="center"></el-table-column>
        <el-table-column label="角色名称" width="160" prop="roleName">
          <template v-slot="{row}">
            <template v-if="row.edit">
              <el-input v-model="row.roleName" size="mini" clearable></el-input>
              <el-button type="warning" size="mini" class="el-icon-refresh" @click="cancelEdit(row)">取消</el-button>
            </template>
            <span v-else>{{ row.roleName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="360" align="center">
          <template v-slot="{row}">
              <el-button icon="el-icon-info" title="分配权限" type="info" @click="toSearchParams(row)"></el-button>
              <el-button icon="el-icon-check" title="确定" type="primary" @click="editAllList(row)"></el-button>
              <el-button icon="el-icon-edit" title="编辑" type="warning" @click="ShoweditAllList(row)"></el-button>
              <el-button icon="el-icon-delete" title="删除" type="danger" @click="deletaOne(row)"></el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-form-item>
  </el-form>
  <!-- 分页列表 -->
  <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-sizes="[5, 10, 20, 30]"
      :page-size="limit"
      :current-page="page"
      layout="prev, pager, next, jumper,->, sizes,total"
      :total="total"
      >
    </el-pagination>
  <!-- 点击添加的弹窗 -->
  <el-dialog title="添加角色" :visible.sync="dialogFormVisible" top width='25%'>
  <el-form v-model="roles">
    <el-form-item label="请输入新昵称" size="normal" prop="roleName">
      <el-input v-model="roles.roleName"></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="youCanAddRole">确 定</el-button>
  </div>
</el-dialog>
</el-card>
</template>

<script>
import user from '@/api/acl/role'
export default {
  data(){
    return{
      // 当前要更改的用户信息
      role:{},
      // 角色名称
      roleName:'',
      // 当前要操作的roles
      roles:{},
      //默认不显示弹窗
      dialogFormVisible:false,
      // 当前页
      page:1,
      // 限制条数
      limit:3,
      //将要展示的数据存储
      tmList:[],
      // 总条数
      total:30,
      //用户信息
      user:{
        username:'',
        password:'',
        nickName:''
      },
      query:'',
      // 批量删除
      ids:[],
      // 搜索的 
      searchName:''
    }
  },
  methods:{
    //点击分配权限跳转
    toSearchParams(row){
      this.$router.push({
        path:'/acl/role/roleTo',
        query:{
          id:row.id,
          roleName:row.roleName
        }
      })
    },
    //搜索的实现
    searchRoles(){
      this.getPage()
    },
    //点击确定实现可以编辑的功能
    async editAllList(role){
      let {updateById} = user;
      try {
        await updateById({id:role.id,roleName:role.roleName});
        this.$message({
          type:'success',
          message:'编辑成功了大哥'
        });
        this.getPage();
      } catch (error) {
        this.$message({
          type:'info',
          message:'编辑更改的信息失败了',
        })
      }
    },
    //显示修改角色的界面
    ShoweditAllList(row){
      console.log(111);
      row.edit = true;
    },
    //取消编辑的实现
    cancelEdit(role){
        role.edit = role.changeRoleName;
        role.edit = false;
        this.$message({
          type:'warning',
          message:'取消修改信息成功了大哥'
        });
    },
    //批量删除
    async deleteAllChecked(){
        let {removeRoles} = user;
        try {
          let result = await removeRoles(this.ids);
          // console.log(result,999);
          this.$message({
            type:'success',
            message:'删除成功',
          })
          this.getPage();
        } catch (error) {
          this.$message({
            type:'info',
            message:'删除失败'
          })
        }
    },
    //选中状态
    selectionChecked(selection){
      this.ids = selection.map(item=>item.id);
    },
    //添加角色
   async youCanAddRole(){
    let {save} = user;
    await save(this.roles);
    this.$message({
        type:'success',
        message:'添加成功了大哥'
      });
      this.dialogFormVisible = false;
      this.getPage();
      this.roles = ''
    },
    // 分页--页数限制
    handleSizeChange(val){
      this.limit = val;
      this.getPage();
    },
    // 当前页
    handleCurrentChange(val){
      this.page = val;
      this.getPage();
    },
    // 点击添加的弹窗
    showDialog(){
      this.dialogFormVisible = true
    },
    // 异步获取分页列表数据
    async getPage(){
      let {getPageList} = user;
      try {
        let result = await getPageList(this.page,this.limit,{roleName:this.searchName});
        // console.log(this.searchName);
        // console.log(result);
        this.tmList = result.data.items.map(item=>{
          return {
            ...item,
            edit:false,//用于编辑是否显示编辑输入框的属性
            changeRoleName:item.roleName,//用户缓存角色名称，用于取消
          }
        });
        this.total = result.data.total;
        // console.log(this.tmList);
      } catch (error) {
        console.log(error);
      }
    },
    // 清空输入框的内容
    removeUser(){
      this.user.username = '';
      this.getPage();
    },
    // 删除单个操作
   async deletaOne(row){
    let {removeById} = user;
      await removeById(row.id);
      // 删除提示
      this.$message({
        type:'success',
        message:'删除成功'
      })
      this.getPage();
  }
  },
  mounted(){
    this.getPage();
  }
}
</script>

<style scoped>

</style>